<template>
	<nt-container>
		<view class="payment">
			<view class="payment-card">
				<nt-card label="">
					<view class="payment-card__remarks">
						<u--textarea v-model="remarks" height="70" placeholder="请输入备注"></u--textarea>
					</view>
					
					<nt-card-item label="上传支付图片" desc="每张图片大小不超过1M"></nt-card-item>
					<nt-upload @success="UpImages = $event" :images="images"></nt-upload>
				</nt-card>
			</view>
			<view class="payment-footer">
				<nt-button text="保存" @tap="submit"></nt-button>
			</view>
		</view>
	</nt-container>
</template>

<script>
import { OverTimeDetails, editOverTime } from "@/api"
export default {
	data(){
		return {
			// 未付备注
			orderId: 0,
			remarks: "",
			images:[],
			UpImages: [],
		}
	},
	onLoad(options){
		this.orderId = options.id || ""
		this.getDetail()
	},
	computed: {
	},
	methods: {
		// 订单详情
		getDetail(){
			let that = this
			OverTimeDetails({id:this.orderId}).then(res => {
				let data= res.data;
				that.remarks = data.remarks
				that.images = data.images
				// console.log(data)
			})
		},
		submit(){
			let UpImages = this.UpImages
			let imgUrls = UpImages.map(item => (item.url))
			// console.log(imgUrls);return;
			let parmas = {
				"id": this.orderId, 
				"remarks": this.remarks, 
				"images": imgUrls
			}
			editOverTime(parmas).then(res => {
				const { code, msg } = res;
				if(code !== 1) return;
				this.toast("修改成功")
				setTimeout(() => {
					uni.redirectTo({
						url:'./index'
					})
				}, 1000)
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.payment{
	padding: 20rpx 20rpx 160rpx;
	box-sizing: border-box;
	&-card{
		margin-bottom: 20rpx;
		/deep/ .nt-card{
			border-radius: 20rpx;
		}
		&__item{
			display:flex;
			align-items: center;
			padding: 20rpx 0;
			&.nopad{
				padding: 0;
			}
			&--label{
				width: 200rpx;
				font-size: 30rpx;
				color:#333;
				font-weight: bold;
			}
			&--right{
				flex: 1;
				display:flex;
				align-items: center;
				justify-content: space-between;
				/deep/ .u-textarea{
					background:#f5f5f5;
				}
			}
			&--btn{
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50%;
				text-align: center;
				font-weight: bold;
				color:#fff;
				font-size: 50rpx;
				background: #333;
				margin-left: 40rpx;
			}
			&--input{
				flex: 1;
				height: 70rpx;
				border-radius: 10rpx;
				background:#F5F5F5;
				padding: 0 10rpx;
				box-sizing: border-box;
			}
		}
		&__payimage{
			height: 1000rpx;
		}
		&__select{
			display:flex;
			flex-wrap: wrap;
			&--item{
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				background: #F5F5F5;
				color:#666;
				font-weight: bold;
				text-align: center;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 24rpx;
				&.active{
					background:var(--theme-color);
					color:#fff;
				}
				// flex: 1;
				&.no-margin{
					margin-right: 0;
				}
			}
		}
		&__invoice{
			-webkit-user-select: text;
			user-select: text;
			&--item{
				padding: 30rpx 0;
				border-top: 1rpx solid #e5e5e5;
				font-size: 24rpx;
				color: #333;
				line-height: 40rpx;
				&-desc{
					display: block;
					
				}
			}
		}
		&__remarks{
			margin-bottom: 20rpx;
			/deep/ .u-textarea{
				background:#f5f5f5;
			}
		}
		&__input{
			display:flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			font-size: 28rpx;
			margin: 20rpx 0;
			&-type{
				width: 180rpx;
				height: 70rpx;
				line-height: 68rpx;
				border-radius: 10rpx;
				color:#333;
				border: 1rpx solid #333;
			}
			&-ipt{
				width: 270rpx;
				height: 70rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				border: 1rpx solid #333 !important;
				border-radius: 10rpx;
				flex: 1;
				margin: 0 20rpx;
				text-align: left;
			}
			&-add{
				width:150rpx;
				background-color: var(--theme-color);
				color:#fff;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				
			}
		}
	}
	&-footer{
		position: fixed;
		bottom: 0;
		left:0;
		right:0;
		padding: 20rpx;
		box-sizing: border-box;
		background:#fff;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	}
}
</style>